<template>
	<view>
		<!-- 主体表单 -->
		<view class="main">
			<!-- 			<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
 -->
			<!-- <view class="title_des">个人注册</view> -->
			<view class="item">
				<image class="login_image" src="../../../static/login/userName.png"></image>
				<input class="main-input" type="number" v-model="phoneData" placeholder="请输入手机号" maxlength="11" />
			</view>
			<view style="margin-top: 8px"></view>
			<view class="item">
				<image class="login_image" src="../../../static/login/code.png"></image>
				<view class="type">
					<input v-model="code" class="main-input-code" maxlength="6" type="number" placeholder="请输入验证码" />
					<getCode codeText="获取验证码" setTime="60" ref="runCodes" @setCode="sendMsg()"></getCode>
				</view>
			</view>
			<view style="margin-top: 8px"></view>
			<view class="item">
				<image class="login_image" src="../../../static/login/password.png"></image>
				<view class="type">
					<input v-model="passData" class="main-input-code" maxlength="20" type="password" placeholder="请设置密码" />
				</view>
			</view>
		</view>
		<view class="btn_login" @click="startRegister">注册</view>
		<!-- 底部信息 -->
		<view class="register_footer">
			<text @tap="isShowAgree" class="cuIcon" :class="showAgree?'cuIcon-radiobox':'cuIcon-round'">同意
			</text>
			<!-- 协议地址 -->
			<navigator url="/pages/my/xieyi/xieyi" open-type="navigate">《用户服务协议》</navigator>和
			<navigator url="/pages/my/yingsi/yingsi" open-type="navigate">《用户隐私协议》</navigator>
		</view>
	</view>
</template>

<script>
	var _this;


	export default {
		data() {
			return {
				//logo图片 base64
				logoImage: '',
				phoneData: '', //用户/电话
				passData: '', //密码
				showAgree: false,
				email: '', //企业邮箱
				code: '', //验证码
			};
		},

		mounted() {
			_this = this;
		},
		destroyed() {
			uni.hideKeyboard()
		},
		methods: {
			isShowAgree() {
				//是否选择协议
				_this.showAgree = !_this.showAgree;
			},
			navBack() {
				uni.navigateBack();
			},
			sendMsg() {
				if (this.phoneData.length !=11) {
					this.$queue.showToast("请输入正确的手机号");
					return;
				}
				this.$queue.showLoading("获取验证码中...");
				this.$Request.get("/system/user/getCodeRegister?sendNumber=" + this.phoneData + "&isRegister=0").then(res => {
					if (res.resultCode == 1) {
						this.$queue.showToast("验证码发送成功请注意查收");
						this.$refs.runCodes.$emit('runCodes'); //触发倒计时（一般用于请求成功验证码后调用）
					} else {
						this.$queue.showToast(res.errmsg)
					}
					uni.hideLoading();
				}).catch(res => {
					uni.hideLoading();
				});

			},
			toRegister() {
				this.$queue.showLoading("注册中...");
				this.$Request.postF("/system/user/register?code=" + this.code, {
					createType: 1,
					usrMail: this.phoneData,
					type: 1,
					openId: this.$queue.getData("openid"),
					usrPasswd: this.passData
				}).then(res => {
					if (res.resultCode == 1) {
						this.$queue.showToast("注册成功，请登录");
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/my/login/login'
							});
						}, 1000)
					} else {
						this.$queue.showToast(res.errmsg)
					}
					uni.hideLoading();

				}).catch(res => {
					// _this.isRotate = false
					uni.hideLoading();
				});
			},
			login() {
				this.$queue.showLoading("登录中...");
				this.$Request.postF("/system/user/login", {
					loginName: this.phoneData,
					password: this.passData
				}).then(res => {
					if (res.resultCode == 1) {
						this.$queue.setData("token", res.data);
						this.getUserInfo()
					} else {
						this.$queue.showToast(res.errmsg)
					}
				}).catch(res => {
					uni.hideLoading();
				});
			},
			getUserInfo() {
				this.$Request.getT("/system/user/token").then(res => {
					if (res.resultCode == 1) {
						this.$queue.setData("mobile", this.phoneData);
						this.$queue.setData("password", this.passData);
						this.$queue.setData("type", res.data.type);
						this.$queue.setData("id", res.data.id);
						this.$queue.setData("userName", this.phoneData)
						uni.switchTab({
							url: '/pages/tabbar/home/home'
						})
					} else {
						this.$queue.showToast(res.errmsg)
					}
					uni.hideLoading();
				}).catch(res => {
					uni.hideLoading();
				});
			},
			startRegister() {
				if (this.phoneData.length !=11) {
					this.$queue.showToast("请输入正确的手机号");
					return;
				}
				if (this.code.length == 0) {
					this.$queue.showToast("请输入验证码");
					return;
				}
				if (this.code.length != 6) {
					this.$queue.showToast('验证码格式不正确');
					return;
				}
				if (this.passData.length < 1) {
					this.$queue.showToast("请设置登录密码");
					return;
				}
				if (this.passData.length < 6) {
					this.$queue.showToast('密码必须大于6位');
					return;
				}
				if (!this.showAgree) {
					this.$queue.showToast("请同意用户服务协议及隐私政策");
					return;
				}
				this.toRegister();
			},
		}
	}
</script>

<style>
	@import url('../../../static/css/icon.css');
	@import url('../../../static/css/main.css');

	.title_des {
		color: #0055b8;
		font-size: 22px;
		margin-bottom: 32px;
	}

	.login_icon_wx {
		color: #999999;
		border: none;
	}

	.type {
		display: flex;
		margin-left: 16px;
		border-bottom: 1px solid #EEEEEE;
		width: 100%;
	}

	.weixinLogin {
		color: #999999;
		text-align: center;
		font-size: 12px;
		margin-top: 60px;
	}

	.footer_des {
		color: #666666;
		text-align: center;
		font-size: 14px;
		margin-top: 40px;
	}

	.getCode {
		font-size: 14px;
		margin-left: 40px;
		color: #0055b8
	}

	.item {
		line-height: 40px;
		display: flex;
	}

	.login_image {
		margin-top: 8px;
		width: 20px;
		height: 25px;
	}

	.main-input {
		font-size: 14px;
		margin-left: 16px;
		border-bottom: 1px solid #EEEEEE;
		height: 40px;
		line-height: 40px;
	}

	.main-input-code {
		width: 70%;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
	}

	.btn_login {
		color: #FFFFFF;
		font-size: 16px;
		width: 250px;
		height: 40px;
		background: #0055b8;
		border-radius: 8px;
		line-height: 40px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 45px;
	}

	.main-input {
		flex: 1;
		text-align: left;
		font-size: 28 upx;
		padding-right: 10 upx;
		margin-left: 20 upx;
	}
</style>
